<style>
	.section_title {
	  color: #929ba8;
	  font-size: 14px;
	  display: flex;
	  justify-content: space-between;
	}

	.section_title span {
	  display: flex;
	  align-items: center;
	}

	.section_detail {
	  padding: 24px 0;
	  position: relative;
	}

	.color-E98667 {
	  color: #e98667;
	}

	.section_detail .icon {
	  width: 14px;
	  height: 14px
	}

	.section_detail .aside {
	  display: flex;
	  align-items: center;
	  position: absolute;
	  right: 0px;
	  top: 10px;
	  font-size: 16px;
	}

	.table-header {
	  height: 40px;
	  background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(234, 234, 234, 1) 100%);
	  display: flex;
	  font-size: 14px;
	  color: #A5AAB7;
	}

	.table-type-default .table-main-row {
	  display: flex;
	  border: 1px solid #E8E5E2;
	  border-top: none;
	  border-right: none;
	}

	.table-type-default .table-main-row span {
	  margin: 5px;
	}

	.table-type-default .table-header li {
	  text-align: center;
	  line-height: 40px;

	}

	.table-type-default .table-main-row li {
	  line-height: 40px;
	  text-align: center;
	  border-right: 1px solid #E8E5E2;
	  padding:0 5px;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}

	.table-main-row ul {
	  border-right: 1px solid #E8E5E2;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}

	.table-type-default .table-main-row ul li {
	  border-bottom: 1px solid #E8E5E2;
	  border-right: none;
	}

	.table-type-default .table-main-row ul li:last-child {
	  border: none
	}

	.table-main-row ul li:last-child {
	  border-bottom: none
	}

	.table-income td, .table-income th {
		padding: 0 8px !important;
		font-weight: 400;
		white-space: nowrap;
	}

	.scal-font {
		transform: scale(0.8);
		display: inline-block;
		text-decoration: line-through;
		font-size: 12px;
		color: #999;
	}
	.scal-font1 {
		display: inline-block;
		text-decoration: line-through;
		color: #999;
	}
	
	.ys-color {
		color: #FFAB26;
	}
</style>
<section id="incomeDetail" class="ml-24 mr-24">
	<div class="hl-list-title clearfix">
	  <h4 class="pull-left">收入详情</h4>
	</div>
	<div class="border-b mt-10 pb-10 pt-10">
		<div class="font-14" style="color: #929BA8;">合同信息</div>
		<div class="line-height-34 pt-10 clearfix">
			<div class="pull-left">
				<span class="color-999">客户名称:</span>
				<span @click="goToCustomerDetails(contractData.zlfId)"><a href="javascript:;">{{ contractData.zlfCompany || '--' }}</a></span>
			</div>
			<div class="pull-left" style="margin-left: 100px;">
				<span class="color-999">合同名称:</span>
				<span>{{ contractData.name || '--' }}</span>
			</div>
			<div class="pull-left" style="margin-left: 100px;">
				<span class="color-999">合同管理编号:</span>
				<span @click="goToContractDetails(contractData.id,contractData.projectId,contractData.version)"><a href="javascript:;">{{ contractData.mCode || '--' }}</a></span>
			</div>
		</div>
	</div>

	<div class="section_detail">
	  <div class="section_title">出租资源</div>
	  <div class="section_title" style="margin:14px 0;color: #666">
	    <span>单元({{acreage | formatNum}}m²)</span>
	    <span @click="isShowSettle = !isShowSettle" style="cursor: pointer;">{{isShowSettle?'收起':'展开'}}详情<span class="icon-Gm-next"
	        style="margin-left:10px;font-size: 12px" :style="isShowSettle?'transform: rotate(90deg)':''"></span></span>
	  </div>
	  <div class="table-type-default" v-if="isShowSettle">
	    <ul class="table-header">
	      <li class="dy-fx-2">项目</li>
	      <li class="dy-fx-2">楼栋</li>
	      <li class="dy-fx-1">楼层</li>
	      <li class="dy-fx-4">单元</li>
	    </ul>
	    <ul class="table-main-row" v-for="item in contractData.units">
	      <li class="dy-fx-2">{{contractData.projectName || '--'}}</li>
	      <li class="dy-fx-2">{{item.buildingName || '--'}}</li>
	      <li class="dy-fx-1">{{item.floorNum  || '--'}}</li>
	      <li class="dy-fx-4" style="display: flex; flex-wrap: wrap;justify-content: center">
	        {{item.unitName}}
	      </li>
	    </ul>
	  </div>
	</div>

	<div class="clearfix table-income mb-20">		
		<div class="dy-flex mb-10" style="justify-content: space-between;">
			<div class="section_title line-height-34">计划收入（下表中金额均不含税）</div>
			<div class="">
				<hl-button @on-click="editrr"  v-if="!editFlag && permissions.indexOf('c343') > -1" >编辑</hl-button>
				<hl-button @on-click="cancelrr" class="mr-5" v-if="editFlag">取消</hl-button>
				<hl-button @on-click="saverr" v-if="editFlag">保存</hl-button>
			</div>
		</div>
		<div style="overflow-x: scroll;">
			<table border="0" class="br-4 box-i-shadow overflow" style="min-width: 100%;">
				<tr class="line-height-40 text-center">
					<th class="color-gray" style="white-space: nowrap;">年份/月</th>
					<th class="border-l color-gray" v-for="item in monthArr">{{ item }}月</th>
				</tr>
				<tr class="line-height-40 text-center border-t" v-for="item in incomeData.year" v-if="incomeData.amounts.length">
					<td class="color-gray dy-flex " style="margin-right: 0px;align-items: center;">
						<div class="dy-fx-2">{{ item }}</div>
						<div class="border-l dy-fx-1" style="margin-right: -8px;padding: 0 8px;">
							<div>收入确认</div>
							<div class="border-t" style="margin: 0 -8px;">账单分摊</div>
							<!-- <div class="border-t" style="margin: 0 -8px;">实收</div> -->
						</div>
					</td>
					<td class="border-l" v-for="(item0,index0) in incomeData.amounts" v-if="item0.month.indexOf(item) > -1" :style="{padding: editFlag && !isNaN(item0.amount) ? '0px !important' : '0 8px !important', 'min-width': editFlag && !isNaN(item0.amount) ? '120px' : 'auto'}">
						<div>
							<input type="text" @blur="validateAmout(index0)" class="form-control text-center" style="height: 45px;line-height: 45px;" v-model="item0.amount" v-if="editFlag && !isNaN(item0.amount) && !item0.withdrawAmount">
							<input type="text" @blur="validateAmout(index0)" class="form-control text-center" style="height: 45px;line-height: 45px;" v-model="item0.withdrawAmount" v-if="editFlag && item0.withdrawAmount">
							<span v-if="editFlag && isNaN(item0.amount)" style="padding: 0 20px;">--</span>
							<span v-if="!editFlag" :class="{'scal-font': item0.withdrawAmount && item0.withdrawAmount != '0.00', 'scal-font1': item0.withdrawAmount && item0.withdrawAmount == '0.00'}">{{ item0.amount }}</span>
							<span style="margin-left: 8px;" v-if="item0.withdrawAmount && item0.withdrawAmount != '0.00' && !editFlag">{{ item0.withdrawAmount }}</span>
						</div>
						<div class="border-t" style="margin-left: -8px;margin-right: -8px;">{{item0.receivableAmount || '--'}}</div>
						<!-- <div class="border-t" style="margin-left: -8px;margin-right: -8px;">{{item0.receivedAmount || '--'}}</div> -->
					</td>
				</tr>
			</table>
		</div>
	</div>
	
	<div class="clearfix table-income mb-20" v-if="revenue_recognition_history_list.length">
		<div class="dy-flex" style="justify-content: space-between;">
			<div class="section_title line-height-34">版本记录</div>
			<div class="" @click="isShowSerrh = !isShowSerrh">
				<a class="mr-10">{{isShowSerrh ? '收起' : '展开'}}详情 </a>
				<span class="icon-Gm-next font-14 inline-block" :style="isShowSerrh?'transform: rotate(90deg)':''"></span>
			</div>
		</div>
		<div v-for="as in revenue_recognition_history_list" class="mb-20">
			<div class="dy-flex mb-10" style="justify-content: space-between;">
				<div>
					<span class="color-999">操作人：</span>
					<span class="color-666">{{  as.operatorName }}</span>
				</div>
				<div class="">{{as.operatorTime | timestamp}}</div>
			</div>
			<div style="overflow-x: scroll;" v-if="isShowSerrh">
				<table border="0" class="br-4 box-i-shadow overflow" style="min-width: 100%;">
					<tr class="line-height-40 text-center">
						<th class="color-gray" style="white-space: nowrap;">年份/月</th>
						<th class="border-l color-gray" v-for="item in monthArr">{{ item }}月</th>
					</tr>
					<tr class="line-height-40 text-center border-t" v-for="item in as.yearAmounts">
						<td class="color-gray" style="width: 83px;">{{ item.year }}</td>
						<td class="border-l" v-for="item0 in (Number(item.amounts[0].month)-1)">--</td>
						<td class="border-l" v-for="item0 in item.amounts">
							<span :class="{'ys-color': item0.highLightFlag == 'Y','scal-font': item0.withdrawAmount && item0.withdrawAmount != '0.00', 'scal-font1': item0.withdrawAmount && item0.withdrawAmount == '0.00'}">{{ item0.amount }}</span>
							<span :class="{'ys-color': item0.highLightFlag == 'Y'}" style="margin-left: 8px;" v-if="item0.withdrawAmount && item0.withdrawAmount != '0.00'">{{ item0.withdrawAmount }}</span>
						</td>
						<td class="border-l" v-for="item0 in (12-Number(item.amounts[item.amounts.length-1].month))">--</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</section>

<script src="modules/bill/scripts/incomeDetail.js" charset="utf-8"></script>
